<template lang="html">
 <transition name="fade">
  <div class="noticeTop">
    <div class="noticeTop-wrap">
      <marquee behavior="scroll"  direction="left"  scrollamount="3" class="marquee">
      <ul class="rolling_list" v-if="dataShuj.length != 0">
        <li v-for="(item, index) in dataShuj"  id="vo">
        恭喜 <span v-text="item.nickname"></span> 抽中了 <span v-text="item.my_hb_money"></span> 元红包
        </li>
      </ul>
    </marquee>
  </div>

  </div>
  </transition>
</template>
<script type="text/ecmascript-6">
  import $ from 'jquery'
export default {
  props: {
    shuj: {
      type: Array,
      default: function () {
        return []
      },
    },
  },
  data () {
    return {
      url: 'http://hbjr.jinrgame.com/HunanLaohuji/getLastList',
      params: {},
      dataShuj: []
    }
  },
  created () {
    this.$http.get(this.url, {emulateJSON:true}).then((response) => {  // Lambda写法
      response = response.data;
      console.log(response)
      this.dataShuj = response.data.list
    });

  },
  mounted () {
    // 滚动ios兼容性
      let rillWidth =  $(".rolling_list li").eq(0).width()*$(".rolling_list li").length+($(".rolling_list li").length-1)*50
      $(".rolling_list").css('width', rillWidth + 'px');
  },
  methods: {
    hideRule: function () {

      // 禁止滚动穿透
//      this.$refs.rulesMask.addEventListener('touchmove', function(e) {
//        e.preventDefault();
//      }, false);
      // 滚动ios兼容性
//      $(".rolling_list").css('width', $(".rolling_list li").eq(0).width()*$(".rolling_list li").length+($(".rolling_list li").length-1)*50+'px');
    }
  },
  computed: {

  },
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import '../common/style/base.styl'

  .noticeTop
    position fixed
    top 0
    left 50%
    width 10rem
    height rem(42)
    z-index 88
    -webkit-transform translate3d(-50%,0%,0)
    transform translate3d(-50%,0%,0)
    background #ffcc21 url("../assets/volume.png") no-repeat rem(36) center
    background-size rem(32) rem(29)
    .noticeTop-wrap
      padding-left rem(75)
      padding-right rem(75)
      .marquee
        height rem(42)
        line-height rem(42)
        li
          display inline-block
          margin-right rem(50)


  .fade-enter-active,
  .fade-leave-active
    transition: opacity .4s , transform 0.3s linear,
      -webkit-transition opacity 1s, -webkit-transition 0.3s linear
  .fade-enter,
  .fade-leave-active
    opacity 0.2
    transform translate3d(0, rem(5), 0)
    -webkit-transform translate3d(0, rem(5), 0)

</style>
